<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统首页</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="../echarts5.2.2/echarts.js"></script>
    <script src="jquery3.5.1/jquery-3.5.1.min.js"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="height: 1500px">
<div class="layui-container" style="width: 100%;height: 100%;border: 1px solid black">
    <!--    layui-hide:通过修改列hide属性后重载表格来实现个别列的显示与隐藏。-->
    <!--    <table class="layui-hide" id="demo1" lay-filter="demo1"></table>-->
    <!--定义图表的DOM宽高-->
    <div id="header" style="width: 100%;height: 50px;font-size: 25px">
        车位数<span id="a1"></span>/ <span id="a2"></span>
    </div>
    <div>
        <div class="layui-col-sm">
            <input type="text" class="layui-input" id="license" placeholder="请输入车牌号" maxlength="7" size="6"
                   style="float: left;max-width: 300px">
            <input type="button" id="enter" class="layui-btn layui-btn-sm" value="车辆入库"
                   style="float: left;height: 40px">
            <input type="text" class="layui-input" id="license2" placeholder="请输入车牌号" maxlength="7" size="6"
                   style="float: left;max-width: 300px">
            <input type="button" id="out" class="layui-btn layui-btn-sm" value="车辆出库" style="height: 40px">
        </div>
        <!--        <div  class="layui-col-sm">-->
        <!--            <input type="text" class="layui-input" id="license2" placeholder="请输入车牌号" maxlength="7" size="6"-->
        <!--                   style="float: left;max-width: 300px">-->
        <!--            <input type="button" id="out" class="layui-btn layui-btn-sm" value="车辆出库" style="height: 40px">-->
        <!--        </div>-->
    </div>
    <div id="main" style="width: 700px;height: 400px;"></div>
    <div id="main2" style="width: 700px;height: 400px"></div>
    <!--    <button id="addGoods" type="button" class="layui-btn layui-btn-fluid">添加商品</button>-->
</div>

<script>
    $(function () {
        $.ajax({
            url: "findReleaseSpace",
            type: "get",
            success: function (data) {
                console.log("data", data)
                let value1 = $("#a1");
                value1.text(data);
            }
        });
    })
    $(function () {
        $.ajax({
            url: "getParkingSpaceCount",
            type: "get",
            success: function (data) {
                console.log("data", data)
                let value1 = $("#a2");
                value1.text(data);
            }
        });
    })
</script>
<script>
    $(function () {
        $.ajax({
            url: "getBarVO",
            type: "post",
            success: function (data) {
                console.log("data============", data)
                //初始化echarts实例
                // let myCharts=echarts.init($("#main"));
                let myCharts = echarts.init(document.getElementById("main"));

                //设置图表的配置项和数据
                let option = {
                    xAxis: {
                        type: 'category',
                        data: data.names,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data.values,
                            type: 'bar'
                        }
                    ]
                };
                //渲染图表
                myCharts.setOption(option);
            }
        });
    })
</script>
<script>
    $(function () {
        $.ajax({
            url: "getPieVO",
            type: "get",
            success: function (data) {
                console.log(data)
                let myCharts = echarts.init(document.getElementById("main2"));
                let option = {
                    backgroundColor: '#2c343c',
                    title: {
                        text: 'Cars Pie',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: data.sort(function (a, b) {
                                return a.value - b.value;
                            }),
                            roseType: 'radius',
                            label: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            itemStyle: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                };
                myCharts.setOption(option);
            }
        })
    })

</script>
<script>
    let license = document.getElementById("license");   //通过原始js获取文本框中输入的车牌号
    $("#enter").click(function () {
        $.ajax({
            url: "updateCarEnterByLicensePlate",
            type: "post",
            data: {"licensePlate": license.value},
            success: function (data) {
                if (data != null && data != 0) {
                    alert("欢迎光临")
                } else {
                    alert("车位已满")
                }
            },
            error: function () {
                alert("服务器错误");
            }
        })
    })
    let license2 = document.getElementById("license2");   //通过原始js获取文本框中输入的车牌号
    $("#out").click(function () {
        $.ajax({
            url: "updateCarOutByLicensePlate",
            type: "post",
            data: {"licensePlate": license2.value},
            success: function (price) {
                if (price == 0 || price > 1) {
                    // window.location.href="http://localhost:6896/index2/"+price;
                    alert("谢谢惠顾，已支付停车费" + price + "元")
                } else if (price == 1) {
                    alert("余额不足")
                } else {
                    alert("未记录此车牌，请走人工服务")
                }
            },
            error: function () {
                alert("服务器错误");
            }
        })
    })
</script>
</body>
</html>